<template>
  <div style="background-color: white;">
    <span style="color: grey">当前位置 >> 科研项目管理 >> 项目录入</span>
    <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm" :rules="formRules"
             style="width: 500px;margin-left: 350px;margin-top: 50px"
    >

      <el-form-item label="项目编号" prop="ino">
        <el-input type="text" v-model="ruleForm.ino" autocomplete="off" @blur.prevent="changeIno()"></el-input>
        <span v-if="this.torf === false" style="font-size: 10px;color: red">该项目编号已存在</span>
      </el-form-item>

      <el-form-item label="项目名称" prop="iname">
        <el-input type="text" v-model="ruleForm.iname" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="项目来源" prop="isource">
        <el-input type="text" v-model="ruleForm.isource" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="项目类别" prop="icategory">
        <el-input type="text" v-model="ruleForm.icategory" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="完成单位" prop="ddepartment">
        <el-input type="text" v-model="ruleForm.ddepartment" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="负责人" prop="leader">
        <el-input type="text" v-model="ruleForm.leader" autocomplete="off" @blur.prevent="changeLeader()"></el-input>
        <span v-if="this.torf1 === false" style="font-size: 10px;color: red">该科研人员不存在</span>
      </el-form-item>


      <el-form-item label="组员人数">
        <el-card style="width: 400px">
          <template #header>
            <div class="card-header">
              <span>请选择课题组成员人数</span>
            </div>
          </template>
          <el-input-number v-model="memberNum" :min="1"  label="ssss" @change="membersOk"></el-input-number>
        </el-card>
      </el-form-item>

      <el-form-item label="课题组成员" prop="member">
        <el-card class="box-card" style="width: 400px;">
          <template #header>
            <div class="card-header">
              <span>单行输入一个课题组成员</span>
            </div>
          </template>
          <div v-for="o in this.memberNum" :key="o" class="text item">
            <el-input type="text" autocomplete="off" v-model="this.members[o]" style="margin-bottom: 10px" @blur.prevent="membersOk"></el-input>
          </div>
        </el-card>
      </el-form-item>


      <el-form-item label="立项时间" prop="topictime">
        <div class="block">
          <el-date-picker v-model="ruleForm.topictime"
                          type="date" style="width: 400px" placeholder="请选择立项时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="拟定期限" prop="duetime">
        <div class="block">
          <el-date-picker v-model="ruleForm.duetime"
                          type="date" style="width: 400px" placeholder="请选择拟定期限">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="经费金额" prop="funds">
        <el-input type="text" v-model="ruleForm.funds" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="是否鉴定" prop="appraise">
        <el-switch
            v-model="ruleForm.appraise"
            active-text="已鉴定"
            inactive-text="未鉴定"
            active-value="1"
            inactive-value="0"
        @change="chagneAppraise"
        >
        </el-switch>
      </el-form-item>

      <el-form-item label="鉴定时间" prop="appraisetime" v-if="ruleForm.appraise === '1'">
        <div class="block">
          <el-date-picker v-model="ruleForm.appraisetime"
                          type="date" style="width: 400px" placeholder="请选择鉴定时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="鉴定单位" prop="appraisedep"  v-if="ruleForm.appraise === '1'">
        <el-input type="text" v-model="ruleForm.appraisedep" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="文件资料" prop="ifiles">
        <el-upload
            class="upload-demo"
            drag
            action="http://222.21.119.252:9999/files/upload"
            multiple
            list-type="text"
            :on-success="filesUploadSuccess"
            :on-error="filesUploadError"
            :before-upload="checkFileBefore"
            style="width: 400px"
            :data=fileVO
            :limit="1"
            :on-exceed='limitCheck'
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            拖拽上传 或 <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              仅支持上传一个文件,且最大容量为100MB
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容" v-model="ruleForm.remark" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="commit"
                   style="width:100%; height:100%;margin-bottom:15px;">提交
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {UploadFilled} from "@element-plus/icons-vue";
import request from "@/utils/request";

export default {
  components: {
    UploadFilled
  },
  name: "addItem",
  data() {
    return {
      fileVO: {
        sort: 'item',
        fileName: ''
      },
      memberNum: 1,
      loadering: true,
      torf: true,
      torf1: true,

      ruleForm: {
        iname: '',
        leader: ''
      },
      members: [],
      formRules: {
        iname: [
          {required: true, message: '请输入项目名称', trigger: 'blur'}
        ],
        appraise: [
          {required: true, message: '请选择鉴定结果', trigger: 'blur'}
        ],
        appraisedep: [
          {required: true, message: '请输入鉴定单位', trigger: 'blur'}
        ],
        appraisetime: [
          {required: true, message: '请输入鉴定时间', trigger: 'blur'}
        ],
        ddepartment: [
          {required: true, message: '请输入完成单位', trigger: 'blur'}
        ],
        duetime: [
          {required: true, message: '请选择拟定期限', trigger: 'blur'}
        ],
        funds: [
          {required: true, message: '请输入经费金额', trigger: 'blur'}
        ],
        icategory: [
          {required: true, message: '请输入项目类别', trigger: 'blur'}
        ],
        ifiles: [
          {required: true, message: '请上传文件资料', trigger: 'blur'}
        ],

        ino: [
          {required: true, message: '请输入项目编号', trigger: 'blur'}
        ],
        isource: [
          {required: true, message: '请输入项目来源', trigger: 'blur'}
        ],
        leader: [
          {required: true, message: '请输入负责人', trigger: 'blur'}
        ],
        member: [
          {required: true, message: '请点击完成课题组成员', trigger: 'blur'}
        ],
        topictime: [
          {required: true, message: '请选择立项时间', trigger: 'blur'}
        ],
      },
    }
  },
  methods: {
    commit() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          this.$message.error("请输入必选项!")
          return
        }
        request.post("/item", this.ruleForm).then(res => {
          console.log(this.ruleForm);
          if (res.code === '200') {
            //弹出成功框
            this.$message.success("添加成功")
          } else {
            this.$message.error("添加失败!请确保表单各项填写完整正确!");
          }
        }).catch(() => {   //防止未知bug,执行不了Controller方法直接报错
          this.$message.error("服务器错误!请联系管理员或重新尝试!");
        })
      })
    },
    //iNo 项目编号改变
    changeIno() {
      if (this.ruleForm.ino === '') {
        this.torf = true;
      } else {
        request.get(`/item/ino/` + this.ruleForm.ino).then(res => {
          if (res.code === '200') {
            //表示不重复,可以通过
            this.torf = true;
          } else {
            //重复,不能通过
            this.torf = false;
          }
        });
      }
    },
    //Leader  负责人改变
    changeLeader() {
      if (this.ruleForm.leader === '') {
        this.torf1 = true;
      } else {
        request.get(`/sperson/pname/` + this.ruleForm.leader).then(res => {
          if (res.code === '200') {
            //表示没有,不能通过
            this.torf1 = false;
          } else {
            //表示有,则可以通过
            this.torf1 = true;
          }
        });
      }
    },
    membersOk() {
      //第一个字符为 , 需要去除
      this.ruleForm.member = this.members.slice(1, this.memberNum + 1).toString();
    },
  //  修改鉴定状态
    chagneAppraise() {
      this.ruleForm.appraisetime = '';
      this.ruleForm.appraisedep = '';
    },
    //文件上传成功
    filesUploadSuccess(res) {
      this.ruleForm.ifiles = res.data;
    },
    //上传之前
    checkFileBefore(file) {

      if (this.ruleForm.ino === '') {
        this.$message.error("上传文件前请先输入项目编号!");
        return false;
      }
      if (file.size / 1024 / 1024 > 100) {
        this.$message.error("文件大小不得超过100MB");
        return false;
      }

      //文件命名
      this.fileVO.fileName = this.ruleForm.ino;

    },

    limitCheck() {
      this.$message.warning('只能上传一个文件');
    },


    filesUploadError(res) {
      console.log(res);
      if (res.code === '201') {
        this.$message.error(res.data.msg);
      } else {
        this.$message.error("上传失败,请重新尝试或联系管理员");
      }
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
